<template>
  <div class="container">
    <div class="main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a href="/">工作台</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="/Filemanagement">文件管理</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="footer">
      <el-upload
        name="file"
        action="api/upload2"
        class="upload-demo"
        drag
        multiple
        style="width: 97%;margin-left: 20px;margin-top: 20px;"
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">
          <p>点击或者将文件拖拽到此处</p>
          <p>文件上传到0SS</p>
        </div>
      </el-upload>

      <div style="display: flex;padding: 0 60px;width: 95%;" class="top">
        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          文件名:
          <el-input
            v-model="input"
            placeholder="请输入文件名称"
            style="width: 200px;height: 25px;padding-left: 4px;"
          />
        </p>

        <p
          style="display: flex;align-items: center;padding-top: 30px;margin-left: 30px;padding-right: 50px"
        >
          文件类型:
          <el-input
            v-model="value"
            placeholder="请输入文件类型"
            style="width: 200px;height: 25px;padding-left: 4px;"
          />
        </p>

        <div style="float: right;margin:10px 70px;">
          <el-button style="padding: 5px;margin-right: 10px;" type="primary" @click="sou()">搜索</el-button>
          <button style="padding: 5px;" @click="chong()">重置</button>
        </div>
      </div>
      <div class="fo" style="display: flex;flex-wrap: wrap;width: 95%;margin-left: 20px;background: #fff;">
          
          
               <div  style="width: 302px;height: 200px;border: 1px solid #ccc;margin:  15px 6px;"
               v-for="v in list"
               key="v.id"
               >
                  <div style="width: 100%;height:200px; text-align: center"> 
                    <img :src="v.img" lazy style="width: 302px;height: 130px;">
               <p>{{ v.username }}</p><p>{{ v.data }}</p></div>
                  </div>
              
             
         </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref,onMounted} from 'vue'
import {wenlist} from '../../api'
export default defineComponent({
  setup() {
    const value = ref('')
    const input = ref('')
    const list=ref()
    onMounted(()=>{
      wenlist().then(res=>{
        console.log(res);
        list.value=res.data.data
      })
    })
    const chong=()=>{
     
    }
    const sou=()=>{

    }
    return {
      value,
      input,
      list,
      chong,
      sou
    }
  }
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background: #eee;
}
.main {
  width: 100%;
  height: 30px;
  background: #fff;
  padding-left: 20px;
  padding-top: 10px;
}

.top {
  width: 90%;
  height: 130px;
  background: #fff;
  margin: 20px;
}
</style>
